<template>
	<QForm ref="formRef" :gutter="20" :col="8" :model="FormValue" :form-options="formOptions"
		   :buttons="['search', 'reset']">

	</QForm>
</template>

<script setup lang="ts" name="base">
import { ref, reactive } from "vue";
import { QForm, type FormItemRows } from "@meetjs/element-plus-kit";

const opts1 = [{ label: "选项1", value: "1" }, { label: "选项2", value: "2" }];

const opts = ref(opts1);
const formRef = ref<any>(null);
const FormValue = ref({
	formPos: 'top',
	formItemPos: 'left',
	formSize: 'default',
	labelWidth: 100
});

const formOptions = reactive<FormItemRows[]>([
	{
		type: "input", label: "Form", prop: "formPos"
	},
	{ type: "input-number", label: "数值", prop: "labelWidth" },
	{ type: "input", label: "输入", prop: "name", },
	{ type: "select", label: "选择", prop: "region", options: opts.value, },
	{ type: "date-picker", label: "时间", prop: "count4", attrs: { type: "date" }, },
]);

const onSearch = () => {
	console.log(FormValue.value);
};
</script>
<style lang="scss" scoped></style>
